<template>
  <!-- 排行榜列表 -->
  <div class="RankList">
    <div class="container" v-for="item in list" :key="item.id">
      <img v-if="item.coverImgUrl" v-lazy="item.coverImgUrl + '?param=150y150'" alt="" />
      <img v-else v-lazy="item.album.picUrl + '?param=150y150'" alt="" />
      <div class="Table">
        <el-table :data="item.tracks || item.songs" style="width: 100%" :show-header="false" stripe lazy @row-dblclick="songsClick">
          <!-- 序号 -->
          <el-table-column width="50">
            <template slot-scope="scope">
              <span :class="{ active: scope.$index < 3 }">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column width="300" :show-overflow-tooltip="true">
            <template v-slot="{ row }">
              <span class="name">{{ row.name }}</span>
              <span v-if="row.alia.length !== 0" class="alia">({{ row.alia[0] }})</span>
            </template>
          </el-table-column>
          <el-table-column prop="ar[0].name"></el-table-column>
        </el-table>
        <div v-if="isShow" class="all"><span @click="allClick(item.id)">查看全部</span> <i class="el-icon-arrow-right"></i></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  props: ['list', 'isShow'],
  data() {
    return {};
  },
  computed: {},
  created() {},
  components: {},
  methods: {
    ...mapMutations(['getSongsId', 'changePlay']),
    songsClick(row) {
      this.getSongsId(row.id);
      //提交播放状态
      this.changePlay(true);
    },
    //查看全部点击
    allClick(id) {
      this.$emit('allClick', id);
    },
  },
};
</script>

<style scoped lang='scss'>
.container {
  display: flex;
  margin-bottom: 20px;
  img {
    @include image(150px, 5px);
    margin-right: 30px;
  }
  .Table {
    width: 100%;
    .active {
      color: $themeColor;
      font-weight: 600;
    }
    .all {
      margin-top: 5px;
      font-size: 13px;
      color: #606266;
      span {
        &:hover {
          color: black;
          cursor: pointer;
        }
      }
    }
  }
}
</style>